<template>
  <div>
    <!-- 使用 v-model 实现双向数据绑定
      <input v-model="inputValue" placeholder="请输入内容">
       <!-- 展示输入框中的内容 -->
    <!-- <p>你输入的内容是: {{ inputValue }}</p> -->
    <!-- 使用 v-bind 绑定按钮的禁用状态 -->
    <!-- <button :disabled="isButtonDisabled" v-on:click="handleClick">点击更新信息</button> -->
    <!-- <img v-bind:src="imageUrl" alt="示例图片" style="width: 200px; height:200px ">  -->

    <input v-model="input1" placeholder="1111" style="color: brown" />
    <h1 style="color: brown">你输入的内容是: {{ input1 }}</h1>
    <button
      v-bind:disabled="isButtonDisabled1"
      v-on:click="handleClick1"
      style="color: brown"
    >
      更新
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const input1 = ref("");
const isButtonDisabled1 = ref(false);
const handleClick1 = () => {
  if (input1.value.trim() === "") {
    isButtonDisabled1.value = true;
  } else {
    isButtonDisabled1.value = false;
    console.log(input1.value);
  }
};

// 定义响应式数据
const inputValue = ref("");
const isButtonDisabled = ref(false);

// 处理按钮点击事件
const handleClick = () => {
  if (inputValue.value.trim() === "") {
    isButtonDisabled.value = true;
    alert("请输入有效的内容");
  } else {
    isButtonDisabled.value = false;
    console.log("你输入的内容是:", inputValue.value);
  }
};
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>
